<!-- 将生命周期的时候说了
vue会将监控范围里面的代码放到内存中
然后将vue指令替换成最终的语法。

思考：为什么不一个个替换而是加载到内存中替换
回答：性能
思考：如何将监控范围里面的代码放到内存中
回答：来了 -->

<div id="app">
        <input type="text" id="a" v-model="text">
        <span id="b">webopenfather</span>
</div>
<script> 
//创建空白文档片段（节点内容 内存）
var flag = document.createDocumentFragment()
//追加子节点
let dom = document.querySelector('#app')
// console.log(dom)
var child
while(child = dom.firstChild){
    flag.appendChild(child) //放到DocumentFragment页面渲染就不会显示/劫持
}
// //将DocumentFragment数据插入到页面
document.querySelector('#app').appendChild(flag)
</script> 